<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>确认订单</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/Font-Awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/iconfont/iconfont.css" rel="stylesheet">
	<style>
		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			/* Set the fixed height of the footer here */
			height: 10%;
			background-color: #f5f5f5;
		}
		.sellerImg{
			width: 20%;
			margin-top: 10%;

		}
		.background{
			height:200px;
			width: 100%;
			background-color: #f5f5f5;
		}
		.background-child1{
			height:30%;
			width: 100%;
			background-color: red;
		}
		.empty{
			float: right;
			margin-right: 5px;
		}
		.bottom{
			height: 40px;
		}


	</style>
	
	<script type="text/javascript">
        $(document).ready(function(url){
            var sellerId = window.location.href.split("=")[1]

            $.ajax({
                type: "GET",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                contentType: "application/json;charset=utf-8",
                url:"http://localhost:8080/Order/user/confirm/" + sellerId, //提交的地址
                async: false,
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    var html1 = '';
                    var html2 = '';
                    var html3 = '';

                   
                    if(data.foods.length > 0){
                        for(var i = 0;i < data.foods.length;i++){
                            html2 +=
                            	'<h3>' +
                            	data.seller.name +
                            	'</h3>' +
        						'<HR>' +
        						'<div class="clearfix ptb10 borderbf2 ogood">' +
        							'<div class="col-xs-4 plr10">' +
        								'<img src="images/img3.jpg" alt="" class="pull-left img-responsive" style="width: 50px">' +
        							'</div>' +
        							'<div class="col-xs-8 clearPadding" style="position:relative;">' +
        								'<div>' +
        									'<h4 class="font14 mt0">' +
        									data.foods[i].name</h4>
        									'<p class="text-dining font14 clearMargin">￥<span class="unitprice" unitprice>' +
        									data.foods[i].price +
        									'</span><span class="text-muted">&nbsp;/份</span></p>' +	 
        								'</div>' +				
        							'</div>' +
        						'</div>'

                        }
                        document.getElementById("product").innerHTML = html2
                    }
                    html3 +=
                    	'<div class="col-xs-7 mlr10  text-center ptb10 " style="background-color:#00AA88"><span style="color: white">￥ ' +
                    	data.total +
                    	'</span></div>'
                		'<div onclick="confirm(' +
                				data.seller.sellerId + ',' +data.total +
                				')" class="col-xs-3 mlr10 text-center ptb10 " style="background-color: #00CC00"><span style="color: white">去支付</span></div>'

                    document.getElementById("header").innerHTML = html3
                    //接收后台返回的结果
                }
            });
        });
        
        function confirm(sellerId,total){
            var remarks = $("#remarks").text();
            var userId = 1
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                data: {"remarks" : remarks,"userId": userId,"sellerid": sellerId,"totalPrice": total},
                contentType: "application/json;charset=utf-8",
                url:"http://localhost:8080/Order/user/confirm/" , //提交的地址
                async: false,
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    if(data.result == 1)
                        layer.msg("成功下订!");
                    }

                    //接收后台返回的结果
                });
        }
	</script>
	
</head>
<body>
<div class="">
	<a href="javascript:history.go(-1);"><img src="images/back.jpg" style="width: 50px;"></a>
	<span style="font-size: 20px">确认订单</span>
</div>
<HR>
<div class="container">

	<div class="row">

		<div class="tabwrap clearfix">
			<div class="tabcontent clearfix">

					<div class="col-xs-12 clearPadding bg-white pull-right" id="product">
						
						</div>
						<!--good end-->			
						
						<HR>
						<!--备注 start-->
						<form role="form">
							<div class="form-group" >
								<label for="name">备注</label>
								<textarea id="remarks" class="form-control" rows="3"></textarea>
							</div>
						</form>
						<!--备注 end-->
					
				</div>

			</div>

		</div>

	</div>
	<div class="footer">
	<div class="col-xs-12  bottom " id="header" >
		
	</div>
	</div>
</div>
<div class="maskbox"></div>
<script src="js/jquery-1.11.2.min.js"></script>
<script>
	$('.tabnav div.col-xs-4').click(function(){
		var index=$(this).index();
		console.log(index);
		$(this).addClass("borderb2").siblings().removeClass('borderb2');
		$('#tabwrap .tabcontent').eq(index).show();
		$('#tabwrap .tabcontent').eq(index).siblings().hide();
	});
function setTotal(){
	var allprice=0;
	var allnum=0;
	$("#product .ogood").each(function(){
		var num=parseInt($(this).find('input[name=onum]').val());
		var price=$(this).find('[unitprice]').text();
		allprice+=num*price;
		allnum+=num;
	});
	$("#allprice").html(allprice.toFixed(2));
	$("#allnum").html(allnum);
}
function cartProduct(id,name,sellprice,onum){
	var one_price=onum*parseFloat(sellprice);
	one_price=one_price.toFixed(2);
	if($('[productid='+id+']').length>0){
    	$('[productid='+id+'] .numbox').html(onum);
   		$('[productid='+id+'] .pricebox span').html(one_price);
  	}else{
    $('.orderdetail').append('<div class="clearfix borderbottom ptb10 plr15 cartgoods" productid="'+id+'" >\
      <div class="col-xs-7 clearPadding">'+name+'</div>\
      <div class="col-xs-5 clearPadding text-right">\
        <div class="pmbox plus pull-right" onclick="plus(this,'+sellprice+')"><i class="icon iconfont text-dining" style="font-size:24px;">&#xe605;</i></div>\
        <div class="numbox Padding5 pull-right">'+onum+'</div>\
        <div class="pmbox minu pull-right"><i class="icon iconfont text-dining" style="font-size:24px;position:relative;top:-2px;">&#xe608;</i></div>\
        <div class="pricebox pull-right mr15 lh24 text-dining">￥<span>'+one_price+'</span></div>\
      </div>\
    </div>');
  } 
} 
function plus(tag,id,name,sellprice,stock){
	var _this=$(tag);
	var input=$(tag).prev();
	var onum=parseInt(input.val());
	onum++;
	if(onum>stock){
		return alert('购买数量不能大于库存');
	}else{
		input.val(onum);
		setTotal();
		cartProduct(id,name,sellprice,onum);
	}	
}
function min(tag,id,name,sellprice,stock){
	var input=$(tag).next();
	var onum=parseInt(input.val());
	onum--;
	if(onum<1){
		input.val(0);
		setTotal();
		cartProduct(id,name,sellprice,onum);
	}else{
		input.val(onum);
		setTotal();
		cartProduct(id,name,sellprice,onum);
	}
}
//点击购物车订单详情出现和隐藏
$('.maskbox').height($(document).height());
$(".orderdetail").hide();
$(".ocartbox,.maskbox").click(function(){
	$(".maskbox").fadeToggle(300);
	$(".orderdetail").slideToggle(300);
});
</script>
<script src="js/zepto.js"></script>
<script>
	$('.sortlist li').on('tap',function(){
		$(this).addClass('active');
		$(this).siblings().removeClass('active');
	});
    var cate=document.getElementById('cate');
    var cateH=cate.offsetHeight;
    var headerH=document.getElementById("header").offsetHeight;//头的高
    var footerH=document.getElementById('footer').offsetHeight;//尾的高
    var showH=$(window).height()-headerH-footerH; 
    var startX_cate,startY_cate,x_cate,y_cate,aboveY_cate=0;
    //触摸
    function touchSatrt_cate(e){
        e.preventDefault();
        var touch=e.touches[0];
        startY_cate = touch.pageY;   //刚触摸时的坐标 
    }
    //滑动
    function touchMove_cate(e){
        e.preventDefault();        
        var  touch = e.touches[0];               
        y_cate = touch.pageY - startY_cate;//滑动的距离
        //cate.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式     
        cate.style.top=aboveY_cate+y_cate+"px"; //这一句中的                          
    }  
    //手指离开屏幕
    function touchEnd_cate(e){
        e.preventDefault();            
        aboveY_cate=parseInt(cate.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;
        if(aboveY_cate>0){        //滑动的距离大于0，即向下滑动
          aboveY_cate=0;
          cate.style.top=headerH+'px';
        }else if(Math.abs(aboveY_cate)+showH>cateH){      //滑动距离太大,向上滑动
          
          if( cateH<=showH ){   //分类的高度小于屏幕
             cate.style.top=headerH+'px';
             aboveY_cate=0;
          }else{
             cate.style.top=-cateH+showH+'px';
             aboveY_cate=parseInt(cate.style.top);
          } 
        }
    }
    //分类滑动
    cate.addEventListener('touchstart',touchSatrt_cate);
    cate.addEventListener('touchmove',touchMove_cate);
    cate.addEventListener('touchend',touchEnd_cate);	
</script> 
</body>
</html>